'use client';

import FormInput from '@/app/components/reusable/form-fields/FormInput';
import Subheading from '@/app/components/reusable/Subheading';
// Components

// Contexts
import { useTranslationContext } from '@/context/TranslationContext';

export const PaymentInformation = () => {
    const { _t } = useTranslationContext();

    return (
        <section>
            <Subheading>{_t('form.steps.paymentInfo.heading')}:</Subheading>
            <div className="flex flex-wrap gap-10 mt-5">
                <FormInput
                    name="details.paymentInformation.bankName"
                    label={_t('form.steps.paymentInfo.bankName')}
                    placeholder={_t('form.steps.paymentInfo.bankName')}
                    vertical
                />
                <FormInput
                    name="details.paymentInformation.accountName"
                    label={_t('form.steps.paymentInfo.accountName')}
                    placeholder={_t('form.steps.paymentInfo.accountName')}
                    vertical
                />
                <FormInput
                    name="details.paymentInformation.accountNumber"
                    label={_t('form.steps.paymentInfo.accountNumber')}
                    placeholder={_t('form.steps.paymentInfo.accountNumber')}
                    vertical
                />
            </div>
        </section>
    );
};
